/* Maybe call this Notifications Dialog */

#message-dialog{
    
    width: fit-content;
    /* min-width: 300px; */

    position: fixed;
    left: 50%;
    transform: translateX(-50%);

    font-family: "Cheese", 'Courier New', Courier, monospace;
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;

    white-space: pre-wrap; /* preserves \n newlines and wraps long lines */

    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: white;
}

#message-dialog::backdrop{
    background-color: darkgray;
    opacity: 0.5;
}

@media (max-width: 600px) {
    #message-dialog{
        font-size: 2rem;
        /* clamp(1.5rem, 6vw, 2.5rem);   */
        min-width: 300px;
    }
    
}